<template>
  <view class="wrap">
    <view class="head_box">
      <view class="head_left">
        <view class="head_left_icon">
          <image :src="retData.info.data_image" mode="aspectFill"></image>
        </view>
        <view class="head_left_info">
          <view class="head_left_info_title line1">
            {{retData.info.name}}
          </view>
          <view class="head_left_info_text line1">
            {{retData.info.corporate}}
          </view>
          <view class="head_left_info_count">
            规格：{{retData.info.data_specs}}
          </view>
        </view>
      </view>
      <view class="head_right">
        <view class="head_right_num">
          {{retData.info.score}}<text>分</text>
        </view>
        <view class="head_right_rank">
          <view class="head_right_rank_spot" :class="retData.info.grade=='B'?'ye_bg':retData.info.grade=='C'?'or_bg':retData.info.grade=='D'?'rd_bg':''">
          </view>
          <view class="head_right_rank_text">
            {{retData.info.grade?retData.info.grade+'级':'无数据'}}
          </view>
        </view>
      </view>
    </view>
    <block v-if="retData.execute_sandard && retData.execute_sandard.howl">
      <view class="gap"></view>
      <view class="title_box">
        <view class="title_box_left">
          <view class="title_line"></view>
          <view class="title_text">
            执行标准
          </view>
        </view>
      </view>
      <view class="rank_box">
        <view class="text_box">
          标准号:
        </view>
        <view class="text_box">
          {{retData.execute_sandard.howl || '暂无'}}
        </view>
        <view class="text_box">
          标准说明:
        </view>
        <view class="text_box">
          {{retData.execute_sandard.illustrate || '暂无'}}
        </view>
      </view>
    </block>

    <view class="gap" v-if="retData.item_list.length"></view>
    <view class="title_box" v-if="retData.item_list.length">
      <view class="title_box_left">
        <view class="title_line"></view>
        <view class="title_text">
          添加剂
        </view>
      </view>
    </view>

    <view class="rank_box" v-for="(item,index) in retData.item_list" :key="index">
      <view class="rank_title">
        <view class="rank_title_left">
          <view class="rank_title_spot" :class="item.grade=='B'?'ye_bg':item.grade=='C'?'or_bg':item.grade=='A'?'gr_bg':''"></view>
          <view class="rank_title_text">
            {{item.grade}}级
          </view>
          <view class="rank_title_tisp" :class="item.grade=='B'?'ye_color ye_border':item.grade=='C'?'or_color or_border':item.grade=='A'?'gr_color gr_border':''">
            {{item.name}}
          </view>
        </view>
      </view>
      <view class="rank_list" v-for="(items,indexs) in item.item" :key="indexs">
        <view class="rank_list_left" @click="toInfoFun(items)">
          <view class="rank_list_line" :class="item.grade=='B'?'ye_bg':item.grade=='C'?'or_bg':item.grade=='A'?'gr_bg':''"></view>
          <view class="rank_list_info">
            <view class="rank_list_title">
              {{items.name}}
            </view>
            <view class="rank_list_text line1">
              {{items.explain}}
            </view>
          </view>
        </view>
        <view class="rank_list_right" @click="toInfoFun(items)">
          <image :src="imgUrl + '13.png'" mode="aspectFill"></image>
        </view>
      </view>
    </view>
    <view class="content" v-if="!retData.item_list.length">
      <view class="content_text">
        上传配料表照片进行解析 请点击
      </view>
      <view class="content_btn" @click="chooseImage">
        点击上传
      </view>
    </view>
    <view class="tisp_gap"></view>
    <view class="title_box">
      <view class="title_box_left">
        <view class="title_line"></view>
        <view class="title_text">
          热量
        </view>
      </view>
      <view class="title_box_right">
        每{{retData.info.data_unit}}<text>(此项不参与等级计算)</text>
      </view>
    </view>
    <view class="heat_box">
      <view class="heat_head">
        <view class="heat_head_left">
          <view class="heat_head_left_icon">
            <image :src="imgUrl + '15.png'" mode="aspectFill"></image>
          </view>
          <view class="heat_head_left_title">
            卡路里
          </view>
          <view class="heat_head_left_count">
            {{retData.info.calorie_num}}Kcal
          </view>
        </view>
        <view class="heat_head_right">
          <view :class="['heat_head_right_spot',kcals == 1?'back_a':kcals == 2?'back_b':kcals == 3?'back_c':'back_d']">
          </view>
          <view class="heat_head_right_text">
            {{kcals==1?'无':kcals==2?'低':kcals==3?'中':'高'}}热量
          </view>
        </view>
      </view>
      <view class="heat_info">
        <view class="heat_info_list_box">
          <view class="heat_info_list">
            <view class="heat_info_icon">
              <image v-if="kcals == 1" :src="imgUrl + '14.png'" mode="aspectFill"></image>
            </view>
            <view class="heat_info_line"></view>
          </view>
          <view class="heat_info_list">
            <view class="heat_info_icon">
              <image v-if="kcals == 2" :src="imgUrl + '14.png'" mode="aspectFill"></image>
            </view>
            <view class="heat_info_line back_b"></view>
          </view>
          <view class="heat_info_list">
            <view class="heat_info_icon">
              <image v-if="kcals == 3" :src="imgUrl + '14.png'" mode="aspectFill"></image>
            </view>
            <view class="heat_info_line back_c"></view>
          </view>
          <view class="heat_info_list">
            <view class="heat_info_icon">
              <image v-if="kcals == 4" :src="imgUrl + '14.png'" mode="aspectFill"></image>
            </view>
            <view class="heat_info_line back_d"></view>
          </view>
        </view>
        <view class="heat_info_num_box">
          <view class="heat_info_num" v-for="(item,index) in retData.stage_list.calorie" :key="index">
            {{item}}
          </view>
        </view>
      </view>
    </view>
    <view class="heat_box">
      <view class="heat_head">
        <view class="heat_head_left">
          <view class="heat_head_left_icon">
            <image :src="imgUrl + '16.png'" mode="aspectFill"></image>
          </view>
          <view class="heat_head_left_title">
            含糖量
          </view>
          <view class="heat_head_left_count">
            {{retData.info.sugar_num}}g
          </view>
        </view>
        <view class="heat_head_right">
          <view :class="['heat_head_right_spot',kcalss == 1?'back_a':kcalss == 2?'back_b':kcalss == 3?'back_c':'back_d']">
          </view>
          <view class="heat_head_right_text">
            {{kcalss==1?'无':kcalss==2?'低':kcalss==3?'中':'高'}}糖量
          </view>
        </view>
      </view>
      <view class="heat_info">
        <view class="heat_info_list_box">
          <view class="heat_info_list">
            <view class="heat_info_icon">
              <image v-if="kcalss == 1" :src="imgUrl + '14.png'" mode="aspectFill"></image>
            </view>
            <view class="heat_info_line"></view>
          </view>
          <view class="heat_info_list">
            <view class="heat_info_icon">
              <image v-if="kcalss == 2" :src="imgUrl + '14.png'" mode="aspectFill"></image>
            </view>
            <view class="heat_info_line back_b"></view>
          </view>
          <view class="heat_info_list">
            <view class="heat_info_icon">
              <image v-if="kcalss == 3" :src="imgUrl + '14.png'" mode="aspectFill"></image>
            </view>
            <view class="heat_info_line back_c"></view>
          </view>
          <view class="heat_info_list">
            <view class="heat_info_icon">
              <image v-if="kcalss == 4" :src="imgUrl + '14.png'" mode="aspectFill"></image>
            </view>
            <view class="heat_info_line back_d"></view>
          </view>
        </view>
        <view class="heat_info_num_box" style="padding-right: 64rpx;">
          <view class="heat_info_num">
            0
          </view>
          <view class="heat_info_num">
            9
          </view>
          <view class="heat_info_num">
            18
          </view>
          <view class="heat_info_num">
            31
          </view>
          <view class="heat_info_num">
            45
          </view>
        </view>
      </view>
      <!-- <view class="tisp_text">
				大约需走{{retData.info.calorie_steps}}步
			</view> -->
    </view>
    <view class="tisp_gap-a"></view>
    <view v-if="isType && retData.cate_list.length">
      <view class="title_box">
        <view class="title_box_left">
          <view class="title_line"></view>
          <view class="title_text">
            同类高分产品
          </view>
        </view>
      </view>
      <view class="type_box">
        <view class="type_list" v-for="(item,index) in retData.cate_list" :key="index" @click="toResultFun(item)">
          <view class="type_list_img">
            <image :src="item.data_image" mode="aspectFill"></image>
          </view>
          <view class="type_list_title">
            {{item.name}}
          </view>
          <view class="type_list_text">
            {{item.score}}分
          </view>
        </view>
      </view>
    </view>
    <view class="no_type" v-else>
      小剂未找到同类高分推荐产品
    </view>
    <view class="expand_box" :style="{'top': 'calc(15rpx + '+(navBarHeight + 'rpx')+')'}" v-if="isExpand">
      <view class="expand_info">
        <!-- 				<view class="expand_text">
					评分方法
				</view> -->
        <!-- 				<view class="expand_line"></view> -->
        <view class="expand_text" @click="setFavoriteFun">
          {{retData.info.is_favorite?'已收藏':'收藏'}}
        </view>
        <view class="expand_line"></view>
        <view class="expand_text" @click="$u.route('/pages/scans/upload?type=2&code='+retData.info.code)">
          纠错
        </view>
        <view class="expand_line"></view>
        <view class="expand_text" @click="show = true;isExpand=false">
          分享
        </view>
      </view>
    </view>
    <view class="share_box" v-if="isShare">
      <view class="share_left">
        <view class="share_left_title">
          尚未有APP？
        </view>
        <view class="share_left_text">
          点击前往下载
        </view>
      </view>
      <view class="share_right">
        <view class="share_right_btn">
          ios下载
        </view>
        <view class="share_right_btn" style="margin-left: 20rpx;">
          安卓
        </view>
      </view>
    </view>
    <u-popup :show="show" @close="close" @open="open" :closeOnClickOverlay="true">
      <view class="partake_box">
        <view class="partake_title">
          分享到
        </view>
        <view class="partake_btn_box">
          <view class="partake_btn" @click="appToShareQQ">
            <view class="partake_btn_icon">
              <image :src="imgUrl + '20.png'" mode="aspectFill"></image>
            </view>
            <view class="partake_btn_text">
              QQ
            </view>
          </view>
          <view class="partake_btn" @click="appToShareWeiXin">
            <view class="partake_btn_icon">
              <image :src="imgUrl + '8.png'" mode="aspectFill"></image>
            </view>
            <view class="partake_btn_text">
              微信
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  scanningDetail,
  getGoodsDetail,
  setFavorite,
  setHistory,
  setRestockItem
} from '@/api/api.js'
export default {
  data() {
    return {
      retImg: 'https://app.jichacha.vip/upload/e8/cb25d38c784a9658a37fa39595f734.jpg',
      retData: {
        cate_list: [],
        info: {},
        item_list: [],
        stage_list: [],
        execute_sandard: {}
      },
      show: false,
      kcals: 3,
      kcalss: 1,
      isType: true,
      isExpand: false,
      navBarHeight: '',
      isShare: false, //分享后显示
      urlArr: []
    };
  },
  onLoad() {
    let that = this;
    uni.getSystemInfo({
      success: function (res) {
        that.navBarHeight = res.windowTop * 2
      }
    });
    // this.retData = uni.getStorageSync('RetData')
    // this.scanningDetailFun()
  },
  onShow() {
    this.retData = uni.getStorageSync('RetData')
    this.kcals = this.retData.info.calorie_index || 1
    this.kcalss = this.retData.info.sugar_index || 1
    this.setHistoryFun()
    // this.retImg = uni.getStorageSync('ScanImg')
  },
  methods: {
    chooseImage() {
      const that = this
      uni.chooseImage({
        count: 3,
        sizeType: ['original', 'compressed'],
        success: (res) => {
          that.urlArr = []
          that.uploadFileAdd(res, 0, res.tempFilePaths.length)
        }
      });
    },
    async uploadFileAdd(res, num, max) {
      const that = this
      if (num == max) {
        console.log(that.urlArr.join())
        that.$nextTick(() => {
          that.setRestockItemFun(that.urlArr.join())
        })
      } else {
        const result = await that.uploadFileFun(res.tempFilePaths[num])
        that.urlArr.push(result.data.url)
        this.uploadFileAdd(res, num + 1, max)
      }

    },
    async uploadFileFun(src) {
      let token = uni.getStorageSync('LOGIN_STATUS_TOKEN')

      return new Promise((resolve, reject) => {
        uni.uploadFile({
          url: 'https://app.jichacha.vip/api/newUpload',
          filePath: src,
          name: "file",
          header: {
            'Authorization': 'Bearer ' + token
          },
          success(res1) {
            resolve(JSON.parse(res1.data))
          },
          fail(res) {
            reject(res)
          }
        })
      })
    },
    setRestockItemFun(img) {
      setRestockItem({
        gcode: this.retData.info.code,
        image_url: img
      }).then((resOne) => {
        uni.setStorageSync('submitImgSrc', this.retData.info.code)
        uni.navigateTo({
          url: '/pages/scans/loading?SubmtType=2'
        })
      }).catch((e) => {
        uni.$u.toast(typeof e === 'string' ? e : '请检查网络连接');
      })
    },
    appToShareWeiXin() {
      const that = this
      uni.share({
        provider: 'weixin', //分享服务提供商（即weixin|qq|sinaweibo）
        scene: "WXSceneSession", //WXSceneSession(分享到聊天界面)、WXSenceTimeline(分享到朋友圈)、WXSceneFavorite(分享到微信收藏)
        type: 1,
        title: "剂安安APP分享",
        summary: "好友邀请你使用剂安安APP,请访问：https://app.jichacha.vip/h5/#/pages/scans/ScanResultOne?gcode=" +
          that.retData.info.code,
        imageUrl: 'http://www.baidu.com/img/flexible/logo/pc/result.png', //分享图片路径(必须是线上可访问图片：http://xxx、https://xxx等)
        success(res) {
          uni.showToast({
            title: '分享成功',
            icon: 'none'
          })
        },
        fail(err) {
          uni.showToast({
            title: '分享失败',
            icon: 'none'
          })
        }
      });
    },
    appToShareQQ() {
      const that = this
      uni.share({
        provider: 'qq', //分享服务提供商（即weixin|qq|sinaweibo）
        scene: "QQSceneSession", //WXSceneSession(分享到聊天界面)、WXSenceTimeline(分享到朋友圈)、WXSceneFavorite(分享到微信收藏)
        type: 1,
        title: "剂安安APP分享",
        summary: "好友邀请你使用剂安安APP,请访问：https://app.jichacha.vip/h5/#/pages/scans/ScanResultOne?gcode=" +
          that.retData.info.code,
        imageUrl: 'http://www.baidu.com/img/flexible/logo/pc/result.png', //分享图片路径(必须是线上可访问图片：http://xxx、https://xxx等)
        success(res) {
          uni.showToast({
            title: '分享成功',
            icon: 'none'
          })
        },
        fail(err) {
          uni.showToast({
            title: '分享失败',
            icon: 'none'
          })
        }
      });
    },
    setHistoryFun() {
      setHistory({
        gcode: this.retData.info.code
      }).then((resOne) => {

      }).catch((e) => {
        uni.$u.toast(typeof e === 'string' ? e : '请检查网络连接');
      })
    },
    setFavoriteFun() {
      if (this.retData.info.is_favorite) {
        this.$u.route('/pages/scans/Collection')
        this.isExpand = false
      } else {
        uni.showLoading({
          title: '提交中'
        })
        setFavorite({
          gcode: this.retData.info.code,
          status: 0
        }).then((res) => {
          uni.hideLoading();
          uni.$u.toast('收藏成功');
          this.retData.info.is_favorite = true
          uni.setStorageSync('RetData', this.retData)
          this.isExpand = false
        }).catch((e) => {
          uni.hideLoading();
          uni.$u.toast(typeof e === 'string' ? e : '请检查网络连接');
        })
      }

    },
    toResultFun(item) {
      const that = this
      console.log(item)
      if (item.code == this.retData.info.code) {
        return uni.$u.toast('点击商品与当前相同');
      }
      uni.showLoading({
        title: '获取中'
      })
      getGoodsDetail({
        gcode: item.code
      }).then((res) => {
        uni.hideLoading();
        const {
          data
        } = res
        let calorie_num = parseFloat(data.info.calorie_num)
        let sugar_num = parseFloat(data.info.sugar_num)
        data.stage_list.calorie.forEach((item, index) => {
          if (calorie_num > item) {
            if (index == data.stage_list.calorie.length - 1 || calorie_num <= data
              .stage_list.calorie[index + 1]) {
              console.log(item)
              data.info.calorie_index = index + 1
            }
          }
        })
        data.stage_list.sugar.forEach((item, index) => {
          if (sugar_num > item) {
            if (index == data.stage_list.sugar.length - 1 || sugar_num <= data.stage_list
              .sugar[index + 1]) {
              data.info.sugar_index = index + 1
            }
          }
        })
        uni.setStorageSync('RetData', data)
        that.retData = data
        that.kcals = that.retData.info.calorie_index || 1
        that.kcalss = that.retData.info.sugar_index || 1
        that.setHistoryFun()
      }).catch((e) => {
        uni.hideLoading();
        uni.$u.toast(typeof e === 'string' ? e : '请检查网络连接');
      })
    },
    toInfoFun(item) {

      uni.navigateTo({
        url: '/pages/scans/details?id=' + item.id
      })
    },
    scanningDetailFun() {
      const that = this
      uni.showLoading({
        title: '获取中'
      })
      scanningDetail({
        image_url: this.retImg
      }).then((res) => {
        uni.hideLoading();
        const {
          data
        } = res
        let calorie_num = parseFloat(data.info.calorie_num)
        let sugar_num = parseFloat(data.info.sugar_num)
        data.stage_list.calorie.forEach((item, index) => {
          if (calorie_num > item) {
            if (index == data.stage_list.calorie.length - 1 || calorie_num <= data
              .stage_list.calorie[index + 1]) {
              console.log(item)
              that.kcals = index + 1
            }
          }
        })
        data.stage_list.sugar.forEach((item, index) => {
          if (sugar_num > item) {
            if (index == data.stage_list.sugar.length - 1 || sugar_num <= data.stage_list
              .sugar[index + 1]) {
              that.kcalss = index + 1
            }
          }
        })
        this.$set(this, "retData", data)
      }).catch((e) => {
        uni.hideLoading();
        uni.$u.toast(typeof e === 'string' ? e : '请检查网络连接');
      })
    },
    onNavigationBarButtonTap(e) {
      this.isExpand = !this.isExpand
    },
    close() {
      this.show = false;
    },
    open() {
      // console.log('open');
    },
  }
}
</script>

<style lang="scss" scoped>
.line1 {
  white-space: nowrap;
  overflow: hidden; //文本超出隐藏
  text-overflow: ellipsis; //文本超出省略号替代
}

.rd_color {
  color: #ee3a3a !important;
}

.rd_bg {
  background: #ee3a3a !important;
}

.rd_border {
  border: 1rpx solid #ee3a3a;
}

.or_color {
  color: #f5752c !important;
}

.or_bg {
  background: #f5752c !important;
}

.or_border {
  border: 1rpx solid #f5752c;
}

.ye_color {
  color: #fec817 !important;
}

.ye_bg {
  background: #fec817 !important;
}

.ye_border {
  border: 1rpx solid #fec817 !important;
}

.gr_color {
  color: #30c285 !important;
}

.gr_bg {
  background: #30c285 !important;
}

.gr_border {
  border: 1rpx solid #30c285 !important;
}

.wrap {
  padding: 30rpx 0 73rpx;

  .head_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;

    .head_left {
      display: flex;
      align-items: center;

      .head_left_icon {
        width: 180rpx;
        height: 180rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .head_left_info {
        margin-left: 16rpx;
        width: 340rpx;

        .head_left_info_title {
          font-size: 30rpx;
          font-weight: bold;
          color: #434242;
        }

        .head_left_info_text {
          margin-top: 20rpx;
          font-size: 24rpx;
          color: #afafaf;
        }

        .head_left_info_count {
          margin-top: 22rpx;
          font-size: 25rpx;
          color: #afafaf;
        }
      }
    }

    .head_right {
      display: flex;
      align-items: center;
      flex-direction: column;

      .head_right_num {
        font-size: 70rpx;
        font-weight: bold;
        color: #ee3a3a;

        text {
          font-size: 20rpx;
        }
      }

      .head_right_rank {
        margin-top: 10rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .head_right_rank_spot {
          width: 24rpx;
          height: 24rpx;
          background: #22c58a;
          border-radius: 50%;
        }

        .head_right_rank_text {
          margin-left: 10rpx;
          font-size: 24rpx;
          color: #737373;
        }
      }
    }
  }

  .gap {
    margin: 36rpx 0 30rpx;
    width: 750rpx;
    height: 12rpx;
    background: #f6f7fb;
  }

  .title_box {
    padding: 10rpx 24rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title_box_left {
      display: flex;
      align-items: center;

      .title_line {
        width: 6rpx;
        height: 24rpx;
        background: #00b9ff;
        border-radius: 3rpx;
        margin-right: 10rpx;
      }

      .title_text {
        font-size: 34rpx;
        font-weight: bold;
        color: #434242;
      }
    }

    .title_box_right {
      font-size: 24rpx;
      color: #737373;
      text {
        font-size: 20rpx;
        margin: 0 10rpx;
      }
    }
  }

  .rank_box {
    width: 750rpx;
    margin-top: 32rpx;
    padding-bottom: 32rpx;
    border-bottom: 1rpx solid #f5f5f5;

    .rank_title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 30rpx;

      .rank_title_left {
        display: flex;
        align-items: center;

        .rank_title_spot {
          width: 24rpx;
          height: 24rpx;
          background: #ee3a3a;
          border-radius: 50%;
        }

        .rank_title_text {
          margin-left: 16rpx;
          font-size: 34rpx;
          font-weight: bold;
          color: #434242;
        }

        .rank_title_tisp {
          margin-left: 16rpx;
          height: 30rpx;
          padding: 0 10rpx;
          background: rgba(238, 58, 58, 0.04);
          border: 1rpx solid #ee3a3a;
          border-radius: 6rpx;
          font-size: 22rpx;
          text-align: center;
          line-height: 30rpx;
          color: #ee3a3a;
        }
      }

      .rank_title_right {
        display: flex;
        align-items: center;

        .rank_title_right_text {
          margin-right: 5rpx;
          font-size: 24rpx;
          color: #737373;
        }

        .rank_title_right_icon {
          margin-top: 8rpx;
        }
      }
    }
    .text_box {
      padding: 0 30rpx;
      margin-top: 20rpx;
      white-space: pre-line;
      word-break: break-all;
      line-height: 50rpx;
      font-size: 28rpx;
    }
    .rank_list {
      margin-top: 32rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 30rpx 0 36rpx;

      .rank_list_left {
        display: flex;

        .rank_list_line {
          margin-top: 14rpx;
          width: 12rpx;
          height: 12rpx;
          background: #f5752c;
          border-radius: 50%;
        }

        .rank_list_info {
          margin-left: 20rpx;
          margin-right: 20rpx;

          .rank_list_title {
            font-size: 28rpx;
            color: #434242;
          }

          .rank_list_text {
            margin-top: 10rpx;
            font-size: 24rpx;
            color: #a7a7a7;
            width: 400rpx;
          }
        }
      }

      .rank_list_right {
        width: 34rpx;
        height: 34rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .tisp_gap {
    margin: 7rpx 0 21rpx;
    width: 750rpx;
    height: 12rpx;
    background: #f6f7fb;
  }

  .tisp_gap-a {
    margin: 30rpx 0;
    width: 750rpx;
    height: 12rpx;
    background: #f6f7fb;
  }

  .heat_box {
    margin-top: 28rpx;

    .heat_head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 40rpx 0 24rpx;

      .heat_head_left {
        display: flex;
        align-items: center;

        .heat_head_left_icon {
          width: 41rpx;
          height: 41rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .heat_head_left_title {
          margin-left: 10rpx;
          font-size: 28rpx;
          font-weight: bold;
          color: #434242;
        }

        .heat_head_left_count {
          margin-left: 18rpx;
          font-size: 24rpx;
          color: #737373;
        }
      }

      .heat_head_right {
        display: flex;
        align-items: center;

        .heat_head_right_spot {
          width: 24rpx;
          height: 24rpx;
          background: #fdc817;
          border-radius: 50%;
        }

        .heat_head_right_text {
          margin-left: 10rpx;
          font-size: 24rpx;
          color: #737373;
        }
      }
    }

    .heat_info {
      width: 750rpx;
      border-bottom: 1rpx solid #f5f5f5;
      margin-top: 26rpx;
      padding-bottom: 26rpx;

      .heat_info_list_box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 50rpx 0 100rpx;

        .heat_info_list {
          display: flex;
          flex-direction: column;
          align-items: center;

          .heat_info_icon {
            width: 18rpx;
            height: 9rpx;
            font-size: 0;

            image {
              width: 100%;
              height: 100%;
            }
          }

          .heat_info_line {
            margin-top: 5rpx;
            width: 144rpx;
            height: 12rpx;
            background: #0e7849;
            border-radius: 6rpx;
          }
        }
      }

      .heat_info_num_box {
        margin-top: 10rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 50rpx 0 125rpx;

        .heat_info_num {
          font-size: 24rpx;
          color: #737373;
        }
      }
    }

    .tisp_text {
      padding: 30rpx 26rpx 0 0;
      opacity: 0.68;
      font-size: 24rpx;
      text-align: right;
      color: #a0a0a0;
    }
  }

  .type_box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 20rpx 19rpx 60rpx;

    .type_list {
      margin: 0 5rpx;
      display: flex;
      align-items: center;
      flex-direction: column;

      .type_list_img {
        width: 231rpx;
        height: 231rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .type_list_title {
        width: 220rpx;
        overflow: hidden;
        /*文本不会换行*/
        white-space: nowrap;
        /*当文本溢出包含元素时，以省略号表示超出的文本*/
        text-overflow: ellipsis;
        margin-top: 20rpx;
        font-size: 28rpx;
        font-weight: bold;
        text-align: center;
        color: #434242;
      }

      .type_list_text {
        margin-top: 10rpx;
        font-size: 24rpx;
        font-weight: bold;
        text-align: center;
        color: #ee3a3a;
      }
    }
  }

  .no_type {
    margin-top: 45rpx;
    font-size: 28rpx;
    text-align: center;
    color: #434242;
  }
}

.back_a {
  background: #0e7849 !important;
}

.back_b {
  background: #1edf38 !important;
}

.back_c {
  background: #fdc817 !important;
}

.back_d {
  background: #ee3a3a !important;
}

.expand_box {
  position: fixed;
  right: 48rpx;
  width: 232rpx;
  height: 301rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, 0.16);

  .expand_info {
    width: 232rpx;
    height: 301rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .expand_text {
      font-size: 28rpx;
      text-align: center;
      color: #434242;
    }

    .expand_line {
      margin: 30rpx 0;
      width: 178rpx;
      height: 2rpx;
      background: #ededed;
    }
  }
}

.share_box {
  z-index: 9999;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36rpx 0 40rpx;
  width: 750rpx;
  height: 137rpx;
  background: rgba(0, 0, 0, 0.72);

  .share_left {
    .share_left_title {
      font-size: 34rpx;
      font-weight: bold;
      color: #ffffff;
    }

    .share_left_text {
      margin-top: 5rpx;
      font-size: 24rpx;
      color: #a7a7a7;
    }
  }

  .share_right {
    display: flex;
    align-items: center;

    .share_right_btn {
      width: 180rpx;
      height: 85rpx;
      background: #00cf6c;
      border-radius: 43rpx;
      box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0, 185, 255, 0.2);
      font-size: 30rpx;
      font-weight: bold;
      line-height: 85rpx;
      text-align: center;
      color: #ffffff;
    }
  }
}

.partake_box {
  width: 750rpx;
  height: 400rpx;
  background: #ffffff;
  padding-top: 63rpx;

  .partake_title {
    font-size: 34rpx;
    font-weight: bold;
    text-align: center;
    color: #434242;
  }

  .partake_btn_box {
    margin-top: 50rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 160rpx;

    .partake_btn {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;

      .partake_btn_icon {
        width: 94rpx;
        height: 94rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .partake_btn_text {
        margin-top: 24rpx;
        font-size: 28rpx;
        text-align: center;
        color: #5b5b5b;
      }
    }
  }
}

.content {
  width: 100%;
  overflow: hidden;
  padding: 20rpx 0;
  .content_img {
    margin: 80rpx auto 0;
    width: 160rpx;
    height: 178rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .content_text {
    margin-top: 0rpx;
    font-size: 24rpx;
    text-align: center;
    color: #434242;
  }

  .content_btn {
    margin: 30rpx auto 0;
    width: 586rpx;
    height: 100rpx;
    background: #00cf6c;
    border-radius: 50rpx;
    box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0, 185, 255, 0.2);
    font-size: 30rpx;
    line-height: 100rpx;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
  }
}
</style>